<template>
  <div class="home">
    <div @click="cityfun" class="citytree" style="color: #FFFFFF;font-size: 0.3rem;">
		<img src="../assets/img/home/locations.png" style="width:0.2rem;height:0.31rem;position: relative;top: 0.05rem;" alt="">{{cityValue}}
	</div>
    <van-popup v-model="cityTreeTag" position="bottom">
      <van-area value="" columns-num='2' :area-list="areaList" @confirm="sure" @cancel='move' cancel-button-text='清除' />
    </van-popup>
    <!-- banner -->
    <banner></banner>
    <!-- 功能列表 -->
    <div class="home_functions">
      <div @click="rejectTo(item,index)" tag="div" :to="{path:`/service?active=${index}`}" class="home_functions__item" v-for="(item ,index) in list.categoryList" :key="index">
        <div class="icon" :style="{backgroundImage:`url(${item.iconImgUrl})`}"></div>
        <p>{{item.name}}</p>
      </div>
    </div>

		<!-- 会员 -->
		<div v-if="list.isVip == 'false'" @click="Tovip" class="home_vip">
			<h4 class="name">会员大礼包</h4>
			<p class="tip">开通会员立享专属优惠</p>
			<span class="btn">立即开通</span>
		</div>

		<div v-if="list.isVip == 'true'" class="home_vip_1">
			<h4 class="name_1">您已是会员，尊享会员权益</h4>
		</div>
		<!-- 法律    -->
		    <div class="home_product">
		      <div class="home_product__item bg_1" @click="toDetail(item,'good')" v-for="(item ,index) in list.fourGoodsList" :key="index">
		        <h2 class="name">{{item.goodsName}}</h2>
		        <p class="tip">{{item.introduce}}</p>
		        <img src="../assets/img/home/fl.png" alt="" class="bg">
		      </div>
		    </div>
		
		    <!-- 超值套餐 -->
		    <div class="home_menu">
		      <div class="title row-between-center ">
		        <strong>超值套餐</strong>
		        <router-link tag="span" to="package" class="row-between-center">
		          全部
		          <van-icon name="arrow" color="#348AFF" />
		        </router-link>
		      </div>
		      <div class="lists flex">
		        <div class="home_menu__item" @click="toDetail(item,'package')" v-for="(item ,index) in list.goodsPackageIPage.records" :key="index">
		          <h4 class="name van-ellipsis">{{item.packageName}}</h4>
		          <p class="price">¥{{item.packagePrice}}</p>
		          <div class="tips flex">
		            <span class="icon_bh"></span>
		            <p class="text van-multi-ellipsis--l2">{{item.introduction}}</p>
		          </div>
		        </div>
		      </div>
		    </div>
		
		    <!-- 推荐服务 -->
		    <div class="home_service">
		      <div class="title row-between-center">
		        <strong>推荐服务</strong>
		        <router-link tag="span" class="row-between-center" to="service">全部
		          <van-icon name="arrow" color="#348AFF" />
		        </router-link>
		      </div>
		      <div class="lists">
		        <div class="home_service__item flex" @click="toDetail(item,'good')" v-for="(item ,index) in list.goodsListResponseIPage.records" :key="index">
		          <div class="bg" :class="['type1']" :style="{backgroundImage:`url(${item.imgUrl})`}"></div>
		          <div class="infor">
		            <h4 class="name">{{item.goodsName}}</h4>
		            <p class="descp">{{item.goodsIntroduction}}</p>
		            <p class="num row-between-center ">
		              <span class="price">{{item.currentPrice}}<small>{{item.originalPrice}}</small></span>
		              <span class="salenum">已售{{item.sellNum}}份</span>
		            </p>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		</template>

<script>
	import api from "api/api"
	import {
		mapMutations
	} from 'vuex'
	import city from '../assets/city.js'
	export default {
		data() {
			return {
				functions: [{
						name: '法律事物',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '征信服务',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '知识产权',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '财税服务',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '中国黄页',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '保险服务',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '资质办理',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: 'Boss靓号',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '行业精英',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					},
					{
						name: '人才招聘',
						icon: '',
						url: require('../assets/img/home/flsw.png')
					}
				],
				list: {
					categoryList: [],
					fourGoodsList: [],
					goodsPackageIPage: {
						records: []
					},
					goodsListResponseIPage: {
						records: []
					},
					isVip: ''
				},
				areaList: {},
				cityTreeTag: false,
				cityValue: '城市选择',
				citycode: '',
			}
		},
		created() {
			this.getData()
			this.cityrepet()
		},
		mounted() {
			let h = window.innerHeight;
			let myInput1 = document.getElementById('myInput1');
			let myInput2 = document.getElementById('myInput2');
			let Lbody = document.getElementsByClassName('body')

			// myInput.addEventListener('focus', handler, false);
			myInput2.addEventListener('focus', handler, false);

			function handler() {
				Lbody.height(h);
			}
		},
		methods: {
			...mapMutations(['UPDATA_CATEGORY']),
			Tovip() {
				this.$router.push('vip')
			},
			cityfun(){
				this.cityTreeTag = true;
			},
			cityrepet() {
				var city = JSON.parse(localStorage.getItem('city'))
				if (city) {
					console.log(city)
					this.cityValue = city.value[1].name
					this.citycode = city.value[1].code
					this.getData()
				}
			},
			getData() {
				this.areaList = city
				api.homeList({
					data: {
						regionId: this.citycode
					}
				}).then(res => {
					if (res.data) {
						console.log('data==', res.data)
						localStorage.setItem('level',res.data.level)
						this.list = res.data
						this.UPDATA_CATEGORY(res.data.categoryList)
						if (res.code != 1001) {

							api.wxAuthorize({
								data: {}
							}).then(res => {
								// 支付
								// if (res.code == 500) {
								// 	this.WXshouq()
								// 	return
								// }
							})
						}
					}
					else{
						this.$router.push('/login')
					}
				})
			},
			cityTree() {
				api.cityTree().then(res => {
					console.log(res.data)
				})
			},
			sure(value) {
				console.log(value)

				if (value[0].code == 100000) {
					this.citycode = ""
					this.cityValue = value[1].name
					var vak = [{
						code: "",
						name: "全国"
					}, {
						code: "",
						name: "全国"
					}]
					localStorage.setItem('city', JSON.stringify({
						value: vak
					}))
					this.getData()
					this.cityTreeTag = false
					return
				}
				this.cityValue = value[1].name
				this.citycode = value[1].code
				localStorage.setItem('city', JSON.stringify({
					value: value
				}))
				this.getData()
				this.cityTreeTag = false
			},
			move() {
				this.cityTreeTag = false
				this.cityValue = '城市选择'
				this.citycode = ""
				this.getData()
				localStorage.removeItem('city')
			},
			// areachange(e,value,index){

			// },
			WXshouq() {
				var appid = 'wx8ed458a8be18ad6c' // appid
				var url = 'http://www.jufuzg.com/' // 回调链接地址，需转码为URI格式，必须去除#后的参数
				var scope = 'snsapi_base' // snsapi_base静默授权，snsapi_userinfo弹出授权页面
				var state = '' // 重定向带的参数
				var wx_link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
					url + '&response_type=code&scope=snsapi_userinfo#wechat_redirect';
				window.location.href = wx_link;
				var str = window.location.href.split('?')[1].split('&')[0].split('code=')[1];
				api.wxSetCode({
					data: str
				}).then(res => {

				})
			},
			toDetail(item, type) {
				console.log(item, type)
				// return
				if (type == 'good') {
					this.$router.push('/service/' + type + '/' + item.id)
					return
				} else if (type == 'package') {
					this.$router.push('/packageDetail/' + type + '/' + item.id)
					return
				}
			},
			rejectTo(item, index) {
				if (item.code == 1 && item.name != '行业精英') {
					this.$router.push(`/service?active=${index}`)
				}
				if (item.code == 2) {
					this.$router.push(`/chinapage?active=${index}`)
				}
				if (item.name == '行业精英') {
					this.$router.push(`/person`)
				}
				if (item.code == 3) {
					this.$router.push(`/recruit?active=${index}`)
				}
			}
		}
	}
</script>

<style lang="scss">
	.home {
		padding-bottom: 2rem;
		position: relative;

		.citytree {
			position: absolute;
			top: 0.35rem;
			left: 0.3rem;
			font-size: 0.2rem;
			z-index: 999;
		}

		// 功能区
		.home_functions {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0.3rem;
			margin-top: 0.37rem;
			justify-content: space-between;

			.home_functions__item {
				margin-bottom: 0.4rem;
				margin-right: 0.23rem;

				&:nth-child(5n) {
					margin-right: 0;
				}

				.icon {
					width: 0.89rem;
					height: 0.89rem;
					margin: 0 auto;
					border-radius: 50%;
					background-size: cover;
					background-position: center;
				}

				p {
					font-size: 0.28rem;
					font-weight: bold;
					color: #111;
					margin-top: 0.2rem;
				}
			}
		}

		// vip
		.home_vip {
			width: 6.89rem;
			height: 1.33rem;
			margin: 0 auto;
			background-image: url("../assets/img/home/hybj.png");
			background-size: 100%;
			position: relative;
			text-align: left;

			.name {
				color: #fff;
				font-size: 0.36rem;
				margin-left: 1.71rem;
				padding-top: 0.25rem;
				line-height: 1;
			}

			p {
				color: #fff;
				margin-left: 1.71rem;
				font-size: 0.24rem;
				margin-top: 0.21rem;
			}

			.btn {
				position: absolute;
				top: 0.44rem;
				right: 0.35rem;
				width: 1.38rem;
				line-height: 0.42rem;
				color: #fff;
				border-radius: 0.21rem;
				background-color: #ff344c;
				font-size: 0.21rem;
				text-align: center;
				padding-top: 0.04rem;
			}
		}

		// vip
		.home_vip_1 {
			width: 6.89rem;
			height: 1.33rem;
			margin: 0 auto;
			background-image: url("../assets/img/home/hybj.png");
			background-size: 100%;
			position: relative;
			text-align: left;

			.name_1 {
				color: #fff;
				font-size: 0.36rem;
				margin-left: 1.71rem;
				padding-top: 0.5rem;
				line-height: 1;
			}
		}

		.home_product {
			display: flex;
			flex-wrap: wrap;
			padding-left: 0.3rem;
			margin-top: 0.37rem;

			.home_product__item {
				width: 3.33rem;
				height: 1.62rem;
				border-radius: 0.13rem;
				position: relative;
				margin-right: 0.23rem;
				margin-bottom: 0.16rem;

				&:nth-child(2n) {
					margin-right: 0;
				}

				&.bg_1 {
					background: rgba(52, 138, 255, 0.12);
				}

				&.bg_2 {
					background: rgba(255, 138, 52, 0.12);
				}

				&.bg_3 {
					background: rgba(255, 52, 76, 0.12);
				}

				&.bg_4 {
					background: rgba(57, 52, 255, 0.12);
				}

				.name {
					font-size: 0.34rem;
					text-align: left;
					padding-top: 0.44rem;
					padding-bottom: 0.22rem;
					margin-left: 0.12rem;
				}

				.tip {
					font-size: 0.22rem;
					text-align: left;
					margin-left: 0.12rem;
				}

				img {
					position: absolute;
					width: 30%;
					top: 0.33rem;
					right: 0.12rem;
				}
			}
		}

		.home_menu {
			padding: 0.3rem;

			.title {
				position: relative;
				margin-bottom: 0.25rem;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: 0;
					width: 0.61rem;
					height: 0.12rem;
					border-radius: 0.6rem;
					background-color: #348aff;
				}

				strong {
					font-size: 0.36rem;
				}

				span {
					font-size: 0.3rem;
				}
			}

			.lists {
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;

				.home_menu__item {
					width: 2.33rem;
					height: 2.39rem;
					background-color: #e6f1ff;
					flex: none;
					margin-right: 0.3rem;
					border-radius: 0.07rem;

					.name {
						font-size: 0.3rem;
						padding: 0.3rem 0 0.3rem 0;
						line-height: 1;
					}

					.icon_bh {
						width: 0.32rem;
						height: 0.32rem;
						background-image: url("../assets/img/home/bh.png");
						background-size: cover;
						margin: 0 0.1rem;
						flex: none;
					}

					.price {
						font-size: 0.48rem;
						color: #ff344c;
						line-height: 1;
						font-style: italic;
						font-weight: bold;
					}

					.tips {
						width: 2.11rem;
						height: 0.66rem;
						margin: 0 auto;
						background-color: #fff;
						border-radius: 0.07rem;
						font-size: 0.22rem;
						color: #9999;
						margin-top: 0.23rem;
						align-items: center;
						text-align: left;
						line-height: 1.1;
					}
				}
			}
		}

		.home_service {
			padding: 0.3rem;

			.title {
				position: relative;
				margin-bottom: 0.25rem;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: 0;
					width: 0.61rem;
					height: 0.12rem;
					border-radius: 0.6rem;
					background-color: #348aff;
				}

				strong {
					font-size: 0.36rem;
				}

				span {
					font-size: 0.3rem;
				}
			}

			.lists {
				.home_service__item {
					width: 6.9rem;
					height: 1.87rem;
					margin-bottom: 0.21rem;
					box-shadow: #eee 0.02rem 0.02rem 0.1rem;

					.bg {
						width: 1.87rem;
						height: 1.87rem;
						background-size: cover;
						background-position: center;
					}

					.infor {
						width: 5.02rem;
						text-align: left;
						padding: 0 0.2rem;

						.name {
							font-size: 0.3rem;
							padding: 0.3rem 0 0.2rem;
							line-height: 1;
						}

						.descp {
							font-size: 0.22rem;
							color: #666;
							margin-bottom: 0.21rem;
							line-height: 1;
						}

						.num {
							.price {
								font-size: 0.28rem;
								color: #ff344c;

								small {
									font-size: 0.22rem;
									color: #999;
									margin-left: 0.1rem;
									text-decoration: line-through;
								}
							}

							.salenum {
								font-size: 0.22rem;
								color: #999;
							}
						}
					}
				}
			}
		}

		.nav {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0.17rem 0.81rem 0.81rem 0.81rem;
			font-size: 0.2rem;
			background-color: #fff;
			border-top: 1px solid rgba(229, 229, 229, 1);

			.text {
				margin-top: 0.1rem;
			}

			.icon_home {
				width: 0.42rem;
				height: 0.42rem;
				background: url("../assets/img/home/home1.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: bottom;

				&.active {
					background-image: url("../assets/img/home/home.png");
				}
			}

			.icon_notice {
				width: 0.42rem;
				height: 0.42rem;
				background: url("../assets/img/home/message2.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: bottom;

				&.active {
					background-image: url("../assets/img/home/message.png");
				}
			}

			.icon_me {
				width: 0.42rem;
				height: 0.42rem;
				background: url("../assets/img/home/my2.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: bottom;

				&.active {
					background-image: url("../assets/img/home/my.png");
				}
			}
		}
	}
</style>
